<template lang="pug">
  .m-content
    .title 报表名称20190101110000详情
    .main
      .export
        el-button(type="primary" icon="iconfont icon-daochu") 导出
      .ratios
        el-row(:gutter="17")
          el-col(:span="6" v-for="(ratio,index) in ratios" :key="index")
            .ratios-item(:class="ratio.class")
              .body
                .title
                  img(:src="ratio.imgurl")
                  div {{ratio.title}}
                .detail
                  .value {{ratio.value}}
                  .desc  {{ratio.desc}}
              .bar
      .ratios-chat
        el-row(:gutter="20")
          el-col(:span="8")
            statistics
          el-col(:span="8")
            statistics
          el-col(:span="8")
            statistics
      .order-list
        .order-title
          i
          | 工单列表
          .right
            el-checkbox(v-model="checked") 启用自动去重
        .export
          el-button(type="primary" icon="iconfont icon-daochu" plain ) 导出
      .host-table
        tr-table(:data="tableData" :columns="columns" :filterWidth="20" :selection="true")
      Pagination(:total="total" :page.sync="listQuery.page_no" :limit.sync="listQuery.page_size" @pagination="getList" )
</template>
<script>
import reportformTotal from '@/assets/images/reportform-total.png'
import reportformSuccess from '@/assets/images/reportform-success.png'
import reportformGoing from '@/assets/images/reportform-going.png'
import reportformFail from '@/assets/images/reportform-fail.png'
import Statistics from './statistics.vue'
import Pagination from '@/components/Pagination'
const ratios = [
  {
    title: '总数',
    desc: '工单总条数',
    imgurl: reportformTotal,
    value: 868,
    class: 'total'
  },
  {
    title: '成功',
    desc: '工单成功数 (条)',
    imgurl: reportformSuccess,
    value: 621,
    class: 'success'
  },
  {
    title: '在途',
    desc: '工单在途数 (条)',
    imgurl: reportformGoing,
    value: 7,
    class: 'going'
  },
  {
    title: '失败',
    desc: '工单失败数 (条)',
    imgurl: reportformFail,
    value: 240,
    class: 'fail'
  }
]

let tableData = [
  {
    name1: '报表名称120190101110000 ',
    name2: '报表名称120190101110000 ',
    name3: '报表名称120190101110000 ',
    name4: '报表名称120190101110000 ',
    name5: '报表名称120190101110000 ',
    name6: '报表名称120190101110000 ',
    name7: '报表名称120190101110000 ',
    name8: '报表名称120190101110000 ',
    name9: '报表名称120190101110000 ',
    name10: '报表名称120190101110000 '
  }
]
export default {
  components: {
    Statistics,
    Pagination
  },
  data () {
    return {
      ratios,
      tableData,
      columns: [
        { prop: 'name1', label: '报表名称' },
        { prop: 'name2', label: '类型' },
        { prop: 'name3', label: '执行方式' },
        { prop: 'name4', label: '执行时间' },
        { prop: 'name5', label: '执行结果' },
        { prop: 'name6', label: '结果分布' },
        { prop: 'name7', label: '执行方式' },
        { prop: 'name8', label: '执行时间' },
        { prop: 'name9', label: '执行结果' },
        { prop: 'name10', label: '结果分布' }
      ],
      listQuery: {
        page_no: 1,
        page_size: 10
      },
      total: 0
    }
  },
  methods: {
    getList () {

    }
  }
}
</script>
<style lang="stylus" scoped>
.m-content
  .main
    .export
      margin-bottom 12px
    .ratios
      .ratios-item
        position relative
        height 97px
        padding 14px 29px 0
        background-color #fbf7ff
        border-radius 3px
        border solid 1px #dadcdc
        overflow hidden
        .bar
          position absolute
          bottom 0
          left 0
          width 100%
          height 5px
          border-radius 3px
        &.total
          color #9769f5
          .bar
            background-image: linear-gradient(90deg,#37cbbe 0%,#8e9dd7 0%,#e56fef 0%,#9469f5 100%),linear-gradient(#ffffff,#ffffff);
            background-blend-mode: normal,normal;
        &.success
          color #18a8ce
          background-color #f5fcfe
          .bar
            background-image: linear-gradient(90deg, #e56fef 0%, #8e9dd7 0%, #37cbbe 0%, #17a5d0 100%), linear-gradient(#ffffff, #ffffff);
            background-blend-mode: normal, normal;
        &.going
          color #597cf8
          background-color #f6faff
          .bar
            background-image: linear-gradient(90deg, #37cbbe 0%, #4cbdde 0%, #60aefe 0%, #597cf8 100%), linear-gradient(#ffffff, #ffffff);
            background-blend-mode: normal, normal;
        &.fail
          color #fe7094
          background-color #fff8f7
          .bar
            background-image: linear-gradient(90deg, #38ccbe 0%, #9ca891 0%, #ff8363 0%, #fe7095 100%), linear-gradient(#ffffff, #ffffff);
            background-blend-mode: normal, normal;
        .body
          display flex
          .title
            width 40px
            flex 0 0 40px
            img
              width 38px
              height 38px
            >div
              margin-top 11px
              text-align center
          .detail
            margin-left 47px
            .value
              font-size 22px
              margin 12px 0
            .desc
              font-size 12px
              color #999
              letter-spacing 1px
    .order-list
      .order-title
        text-indent 9px
        height 34px
        line-height @height
        margin-top 15px
        border-bottom  1px solid #eff1f5
        i
          display block
          float left
          width 3px
          height 12px
          background-color #1f60bd
          margin-top 11px
        .right
          float right
          height 34px
          line-height @height
          margin-right 18px
      .export
        margin-top 12px

</style>
